<template>
  <div class="movie_body">
        <ul>
          <li v-for="item in nowplayinglist" :key="item.id">
            <img :src="item.img" alt="无法显示图片" />
            <div class="info">
              <h3>{{ item.moviename }}</h3>
              <p>
                观众评 <span>{{ item.grade }}</span>
              </p>
              <p>主演: {{ item.star }}</p>
              <p>{{ item.showinfo }}</p>
            </div>
            <div class="btn_mall" @click="detail(item.id)">详情</div>
          </li>
        </ul>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
import { Indicator } from "mint-ui";
export default {
  data() {
    return {
      nowplayinglist: "",
      //上次进入此页面时的城市数据
      lastcityid:null,
    };
  },
  created() {
    
  },
  activated() {
    window.sessionStorage.setItem('lastpath','/movie/nowplaying')
    var nowcityid = this.$store.state.city.id
    //如果城市数据没变,就不重新发送请求获取数据了
    if(this.lastcityid==nowcityid){
      return  
    }
    this.getnowplaying();
    
  },
  methods: {
    //发送请求
    async getnowplaying() {
      Indicator.open();
      const res = await this.$axios.get("http://192.168.43.145:3000/nowplaying");
      if (res.status == 200) {
        this.nowplayinglist = res.data.nowplayinglist;
        this.lastcityid=this.$store.state.city.id
        Indicator.close();
      } else {
        Indicator.close();
        Toast("请求失败");
      }
    },
    //点击进入详情
    detail(id){
      this.$router.push({path:`/movie/detail/${id}`})
    },
  },
}
</script>

<style  scoped>
.info span {
  font-weight: 700;
  color: #faaf00;
  font-size: 15px !important;
}
li {
  box-sizing: border-box;
  height: 6.8125rem;
  border-bottom: 0.0625rem dotted #e6e6e6;
  padding: 0.75rem 1rem 0.9375rem 1rem;
  position: relative;
}
li img {
  width: 4rem;
  height: 5.5625rem;
  object-fit: cover; /*各种图片大小都可适应*/
  float: left;
}
li .info {
  float: left;
  margin-left: 0.875rem;
}
li .info span {
  font-size: 1.125rem;
  line-height: 1.375rem;
}
li .info p {
  font-size: 0.8rem;
  line-height: 1.4375rem;
  color: #666;
}
li > p {
  float: right;
  font-size: 1.0625rem;
  color: #fc7103;
}
.btn_mall {
  width: 47px;
  height: 27px;
  line-height: 27px;
  text-align: center;
  background-color: #f03d37;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  color: white;
  position: absolute;
  top: 43px;
  right: 13px;
}
</style>
